<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 16:59:06
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-30 22:42:20
 * @FilePath: \guanggu_traffic\src\views\traffic\components\EventManage\ToDoEventPopup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-dialog
		title="待办事项"
		width="1000"
		draggable
		overflow
		:close-on-click-modal="false"
	>
		<div class="control">
			<el-input
				v-model="descriptionReport"
				placeholder="请输入关键字搜索"
				size="large"
				style="width: 240px"
			/>
		</div>
		<el-table
			:data="tableData"
			border
			style="width: 100%"
			@row-click="handleRowClick"
		>
			<el-table-column prop="name" label="用户名" width="80" />
			<el-table-column prop="type" label="事件类型" width="100" />
			<el-table-column prop="address" label="事件地址" />
			<el-table-column prop="signage" label="附近建筑" />
			<el-table-column prop="time" label="发生时间" />
			<el-table-column prop="describe" label="事件描述" />
		</el-table>
		<!-- 分页器 
          :current-page="currentPage" 当前页码
          :page-size="limit" 每页显示条数
          :total="props.modalData.attrValues.length" 总条数
          @current-change="handleCurrentChange" 切换页码时触发
    -->
		<el-pagination
			size="small"
			background
			layout="prev, pager, next"
			:page-size="limit"
			:total="middleData.length"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
		/>
	</el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
//拿到父组件传递过来的todoData
const props = defineProps({
	todoData: {
		type: Object,
	},
})
//分页逻辑

const limit = 4
const middleData = ref([])
const currentPage = ref(1)
//点击下一页
const handleCurrentChange = (value) => {
	currentPage.value = value
}
//
const descriptionReport = ref('') //输入框的值
//表格中的数据有以下就算属性得到
const tableData = computed({
	get: () => {
		let filterData = props.todoData
		//如果输入框中有值则过滤数据
		if (descriptionReport.value) {
			filterData = filterData.filter(
				(item) =>
					item.name.includes(descriptionReport.value) ||
					item.type.includes(descriptionReport.value) ||
					item.address.includes(descriptionReport.value) ||
					item.signage.includes(descriptionReport.value) ||
					item.describe.includes(descriptionReport.value)
			)
		}
		middleData.value = filterData
		const start = (currentPage - 1) * 4
		const end = start + limit;

		return filterData.slice(start, end)
	},
	set: (val) => {
		console.log(val)
	},
})
//定义组件发给父组件的事件
const emit = defineEmits(['ToDoEventAdd'])
//某一行点击事件
const handleRowClick = () => {
	//row就是当前行的数据
	console.log(row)
	emit('ToDoEventAdd', row) //触发父组件的事件,并传递当前行的数据
}
</script>

<style lang="scss" scoped>
.control {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}
.el-pagination {
	margin-top: 10px;
}
</style>
